<template>
  <div>
    <a-card :bordered="false" style="padding: 0px;height: 273px">
      <a-row>
        <a-col :sm="4" :xs="24" style="background: #f6f8f9;">
          <div class="detail-handle fl">
            <div><h3>{{ workHour }}</h3>
              <p>今日工作时长</p></div>
            <!--            <i class="icon iconfont iconcontract"> 查看日报</i> &lt;!&ndash;&ndash;&gt;-->
<!--            <a-button type="primary" @click="writeReport">撰写日报</a-button>-->
          </div>
        <!--  <div class="detail-handle fl">
            <div><h3>{{ workHourRemain }}</h3>
              <p>剩余时长</p></div>
          </div>-->
        </a-col>
        <a-col :sm="20" :xs="24">
          <a-col  v-has="'workData:show'" :span="24" align="right">
            <a-button type="link" @click="allWork" >全部工作日志</a-button>
          </a-col>
          <bar title="" :dataSource="barData" style="height: 200px" :height="200" yaxis-text="分钟"/>
        </a-col>
      </a-row>
    </a-card>

    <a-card
      style="margin-top: 24px"
      :bordered="false"
      title="工作计划">
      <a-row style="margin-bottom: 20px">
        <a-col :sm="3" :xs="12" align="left">
          <div style="margin-top: 10px;margin-left:20px;width: 90px">
            <!--<a-avatar slot="avatar" size="small" style="background-color: #1890ff">+</a-avatar>-->
            <span style="font-size: large">填写计划：</span>
          </div>
        </a-col>
        <a-col :sm="5" :xs="10" style="width: 620px">
          <a-textarea  :rows="2" v-model="model.title" placeholder="添加工作计划" />
          <!--<a-textarea  :rows="2" v-model="model.title" placeholder="添加工作计划" @pressEnter="addWork"/>-->
        </a-col>
        <a-col :sm="5" :xs="24" align="left" style="margin-left: 20px;margin-top: 10px">
          <a-button type="primary" @click="addWork">确认添加</a-button>
        </a-col>
      </a-row>

      <a-collapse :activeKey=actkey style="background-color: white;border: 0px solid white;">
        <a-collapse-panel key="1" header="计划中的任务" style="padding: 0px">
          <a-list style="margin-left: 2%;margin-right: 2%;padding: 0px">
            <a-list-item :sm="2" :key="index" v-for="(item, index) in data" style="height: 50px">

              <div class="list-content" style="width: 70%">
                <p style="margin-bottom: 0px">{{ item.title.substr(0,50) }}</p>
              </div>

              <div class="list-content" style="width: 7%;float: right">
                <a-date-picker
                  style="width: 160px"
                  format="YYYY-MM-DD"
                  :bordered="false"
                  v-model="item.endDate"
                  :placeholder="'计划完成时间'"
                  @change="(date, dateStrings) =>onDateChange(date, dateStrings, item.id)"
                  @ok ="(date, dateStrings) =>onDateOk(date, dateStrings, item.id)"
                />
              </div>
              <div class="list-content" style="width: 3%;float: right">
             <!-- <a-avatar  @click="doneWork($event,item.id)" slot="avatar"
                           style="background-color: white;border-color: #18ff2f;border: 1px solid #1890ff;cursor: pointer"></a-avatar>-->
                <a-button type="primary" shape="round" @click="doneWork($event,item.id)" >确认完成</a-button>
              </div>
              <div class="list-content" style="width: 5%;float: right">
                <!-- <a-avatar  @click="doneWork($event,item.id)" slot="avatar"
                              style="background-color: white;border-color: #18ff2f;border: 1px solid #1890ff;cursor: pointer"></a-avatar>-->


                <a-popconfirm title="确定删除吗?" @confirm="() => removeWork($event,item.id)">
                  <a-button  >删除任务</a-button>
                </a-popconfirm>



              </div>
            </a-list-item>
          </a-list>
        </a-collapse-panel>
      </a-collapse>




      <a-collapse :activeKey="0" style="background-color: white;border: 0px solid white;">
        <a-collapse-panel key="1" header="已完成的任务">
          <a-list style="margin-left: 2%;margin-right: 2%">
            <a-list-item :key="index" v-for="(item, index) in dataDone" style="height: 50px">
              <div class="list-content" style="width: 80%">
                <p style="margin-bottom: 0px">{{ item.title.substr(0,50) }}</p>
              </div>
              <div class="list-content" style="width: 20%;float: right">
                <p>计划完成日期：{{ item.endDate? item.endDate:"未设置"}}</p>
              </div>
              <div class="list-content" style="width: 15%;float: right">
                <p>实际完成日期：{{ item.endDateAct? item.endDateAct:"未设置"}}</p>
              </div>
            </a-list-item>
          </a-list>
        </a-collapse-panel>
      </a-collapse>
    </a-card>
    <a-card
      style="margin-top: 24px"
      :bordered="false"
      title="最近工作截图">
      <a-row>
        <a-col v-has="'workData:show'" :span="24" align="right">
          <a-button type="link" @click="allWork" >全部工作日志</a-button>
        </a-col>
      </a-row>
      <a-row>
        <!-- 预览区域 -->
        <a-col :span="24">
          <template>
            <a-empty :image="simpleImage" v-if="dataFlag"/>
<!--            <a-empty v-if="dataFlag" />-->


            <div v-for="(fileDetail,index) in fileDetails" :key="index">
              <div
                style="float: left;padding-left: 30px;width:204px;height:204px;margin-right: 10px;margin: 0 18px 18px 0;">
                <div
                  style="width: 100%;height: 80%;position: relative;padding: 8px;border: 1px solid #d9d9d9;border-radius: 4px;">
                  <img style="width: 100%;height: 80%;cursor: pointer" :src="fileDetail.imgUrl"
                       :preview="0">
                </div>
                <div class="meta">
                  <p>{{fileDetail.dates}}</p>
                  <div class="action cl"><span class="fl">强度:</span>
                    <div class="rate cl wrapper">
                      <a-rate :value="fileDetail.strength" color="#3fd153" :allowClear="false" :count="10" :disabled=true>
                        <a-icon slot="character" type="star" theme="filled" style="font-size:12px;"/>
                      </a-rate>
                    </div>
                  </div>
                </div>
              </div>
            </div>

          </template>
        </a-col>
      </a-row>
    </a-card>
  </div>
</template>

<script>
import ChartCard from '@/components/ChartCard'
import ACol from "ant-design-vue/es/grid/Col"
import ATooltip from "ant-design-vue/es/tooltip/Tooltip"
import MiniArea from '@/components/chart/MiniArea'
import MiniBar from '@/components/chart/MiniBar'
import MiniProgress from '@/components/chart/MiniProgress'
import RankList from '@/components/chart/RankList'
import Bar from '@/components/chart/Bar'
import LineChartMultid from '@/components/chart/LineChartMultid'
import HeadInfo from '@/components/tools/HeadInfo.vue'
import {BorderOutlined} from '@ant-design/icons-vue';
import Trend from '@/components/Trend'
import Rate from 'ant-design-vue/es/vc-rate/src/Rate'
import {getAction, postAction} from '@/api/manage'
import { Empty } from 'ant-design-vue';
import { SearchOutlined } from '@ant-design/icons-vue';

const data = []
const dataDone = []
const barData = []


export default {
  name: "WorkplaceRoute",
  components: {
    SearchOutlined,
    ATooltip,
    ACol,
    ChartCard,
    MiniArea,
    MiniBar,
    MiniProgress,
    RankList,
    Bar,
    Trend,
    LineChartMultid,
    HeadInfo,
    Rate,
    BorderOutlined
  },
  data() {
    return {
      actkey: 0,
      data,
      dataDone,
      simpleImage: Empty.PRESENTED_IMAGE_SIMPLE,
      barData,
      params: {},
      dataFlag: true,
      userId: null,
      workHour: "",
      workHourRemain: "",
      fileDetails: [],
      model: {
        title: '',
      },
      //数据集
      dataSource: []
    }
  },
  created() {
    this.params = this.$route.query;
    this.loadData();
    this.getUndoWork();
    this.getDoneWork();
  },
  methods: {
    loadData() {
      console.log(this.params);
      getAction('/sysUserReport/workHour', {userId: this.$route.query.userId}).then(res => {
        console.log(res)
        if (res.success) {
          this.workHour = res.result.workTime;
          this.workHourRemain = res.result.workHourRemain + "工时";
        }
      });
      getAction('/sysUserReport/workHourChar', {userId: this.$route.query.userId}).then(res => {
        console.log(res)
        if (res.success) {
          let list = res.result;
          for (let i = 0; i < list.length; i++) {
            barData.push({
              x: list[i].dayShort,
              y: list[i].workHour
            })
          }
        }
      });
      getAction('/sysUserReport/list', {userId: this.$route.query.userId,limit:28}).then(res => {
        console.log(res)
        if (res.success) {
          let list = res.result;
          this.fileDetails = [];
          for (let i = 0; i < list.length; i++) {
            this.dataFlag = false;

            this.fileDetails.push({
              imgUrl: list[i].pic,
              dates: list[i].dates,
              strength: parseInt(list[i].strength)
            })
          }
          this.dataSource.push({
            key: 0,
            fileDetails: this.fileDetails
          });
        }
      });
    },

    addWork(){
      if (this.model.title == '') {
        return;
      }
      this.model.userid = this.$route.query.userId;
      postAction("/system/sysUserPlan/add", this.model).then((res) => {
        if (res.success) {
          // this.actkey = 1;
          this.getUndoWork()
          this.model.title = ''
          this.$message.success(res.message)
        } else {
          this.$message.warning(res.message)
        }
        this.model.title = ''
      })
    },
    getUndoWork(){
      getAction("/system/sysUserPlan/undo/list",{userId: this.$route.query.userId}).then((res) => {
        if (res.success) {
          let size = res.result.length;
          this.data.splice(0,this.data.length);
          let date = new Date();
          for (let i = 0; i < size; i++) {
            let end = res.result[i].endDate;
            let message = "点击设置截止日"
            if(end){
              console.log(Date.parse(end.replace(/\-/g,'/')));
              console.log(date);
              if(Date.parse(end.replace(/\-/g,'/')) > date){
                message = end+"截止"
              }else{
                message = "截止"
              }
            }
            this.data.push({
              title: res.result[i].title,
              id: res.result[i].id,
              endDate: res.result[i].endDate,
              message: message
            })
          }
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    getDoneWork(){
      getAction("/system/sysUserPlan/done/list",{userId: this.$route.query.userId}).then((res) => {
        if (res.success) {
          let size = res.result.length;
          this.dataDone = [];
          let date = new Date();
          for (let i = 0; i < size; i++) {
            let end = res.result[i].endDate;
            let message = "截止"
            if(end){
              console.log(Date.parse(end.replace(/\-/g,'/')));
              console.log(date);
              if(Date.parse(end.replace(/\-/g,'/')) > date){
                message = end+"截止"
              }else{
                message = "截止"
              }
            }
            this.dataDone.push({
              title: res.result[i].title,
              id: res.result[i].id,
              endDate: res.result[i].endDate,
              endDateAct: res.result[i].endDateAct,
              message: message
            })
          }
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    doneWork(obj,id) {
      console.log(obj.target.id)
      postAction("/system/sysUserPlan/" + id + "/1", this.model).then((res) => {
        if (res.success) {
          this.getUndoWork()
          this.getDoneWork()
          this.$message.success("更新任务状态成功")
        } else {
          this.$message.warning(res.message)
        }
      })
    },

    removeWork: function (obj, id) {


      postAction("/system/sysUserPlan/" + id + "/1", this.model).then((res) => {
        if (res.success) {
          this.getUndoWork()
          this.getDoneWork()
          this.$message.success("已删除任务")
        } else {
          this.$message.warning(res.message)
        }
      })
    }

    ,
    onDateChange: function (value, dateString,id) {
      console.log(value);
      postAction("/system/sysUserPlan/date/" + id + "/"+dateString, this.model).then((res) => {
        if (res.success) {
          // this.$router.go(0)
          //this.getUndoWork()
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    onDateOk(value, dateString,id) {
      console.log(value);
      postAction("/system/sysUserPlan/date/" + id + "/"+dateString, this.model).then((res) => {
        if (res.success) {
          // this.$router.go(0)
          //this.getUndoWork()
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    allWork(){
      this.$router.push({path: '/jeecg/ImagPreviewRoute', query: this.params})
    },
    writeReport(){
      this.$router.push({path: '/system/SysUserDailyList', params: {}})
    }
  }
}
</script>

<style lang="less" scoped>
.ant-avatar-lg {
  width: 48px;
  height: 48px;
  line-height: 48px;
}

.list-content-item {
  color: rgba(0, 0, 0, .45);
  display: inline-block;
  vertical-align: middle;
  font-size: 14px;
  margin-left: 10px;

  span {
    line-height: 20px;
  }

  p {
    margin-top: 2px;
    margin-bottom: 0;
    line-height: 22px;
  }
}

.detail-handle {
  width: 200px;
  height: 100%;
  padding: 30px 0 30px 30px;
  box-sizing: border-box;
}

.fl {
  float: left;
  margin-top: 6px;
}

.detail-handle h3 {
  font-size: 20px;
  color: #092235;
  line-height: 30px;
  font-weight: 700;
}

.detail-handle p {
  font-size: 14px;
  color: #9ca6ae;
  line-height: 20px;
  margin-bottom: 80px;
}

.detail-handle i {
  font-size: 14px;
  color: #008bf7;
  cursor: pointer;
}

::v-deep .wrapper li {
  margin-right: 0px;
}

.ant-rate {
  color: #3fd153;
  font-size: 10px;
}
.meta {
  margin-top: 5px;
  margin-bottom: 10px;
  line-height: 0px;
}
.meta p {
  font-size: 12px;
  line-height: 20px;
  margin-bottom: 10px
}
.ant-list-item-meta{
  flex: 0;
}
::v-deep .ant-calendar-picker-input {
  border: 0px;
  cursor: pointer;
}
::v-deep .ant-input[disabled] {
  color: white;
}
::v-deep .ant-input-disabled {
  color: white;
  background-color: white;
}
</style>